<template>
  <div>
    <div class="header_wrapper">
      <Top />
      <div class="home_logo_bg">
        <div class="logo_img_wrapper">
          <!-- <img class="mid_bg" src="@/assets/front-img/front_home_top_logo_mid_bg.png" alt="logo" />
          <img class="left_logo" src="@/assets/front-img/front_home_top_logo_left.png" alt="logo" />
          <img class="right_logo" src="@/assets/front-img/front_home_top_logo_right.png" alt="logo" /> -->
        </div>
        
        <div class="content_bg">
          <div class="logo-section">
            <div style="display: flex;">
              <img src="@/assets/front-img/front_home_top_logo_bg_blue.png" style="width:196px; height:46px;" alt="logo" />
              <img src="@/assets/front-img/front_home_top_slogan_blue.png" style="margin-left: 14px; width:257px; height:40px;" alt="logo" />
            </div>
            <!-- <Search :searchContent = 'searchContent' @updateSearchContent = "updateSearchContent"/> -->
          </div>
          
          <div class="nav_section">
            <div class="nav_bg">
              <div class="nav">
                <ul>
                  <li v-for="(item,index) in  navList" :key="index">
                    <a :class="currentIndex===index?'active':''" @click="navSelect(item)">{{item.name}}</a>
                    <template v-if="item.children">
                      <div class="children">
                        <p :class="childrenIndex===index2?'on':''" v-for="(children,index2) in  item.children" :key="index2"
                          @click="navChildrenSelect(item,children)">{{children.label}}</p>
                      </div>
                    </template>
                  </li>
                </ul>
              </div>
              <div class="search_bg">
                <Search :searchContent = 'searchContent' @updateSearchContent = "updateSearchContent"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 176px;">

    </div>
  </div>
</template>

<script>
  import Search from "./Search";
  import Top from "./Top";
  export default {
    components: {
      Search,
      Top
    },
    props: {
      searchContent: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        navList: [{
            name: "众茶通",
            to: "/front-home"
          },
          {
            name: "商品展示",
            to: "/front-goodList?type=0"
          },
          // {
          //   name: "B2B交易",
          //   to: "/front-transaction"
          // },
          {
            name: "数据中心",
            to: "/front-dataEcharts"
          },
          {
            name: "众茶云仓",
            to: "/front-storeCenter"
          },
          // {
          //   name: "金融中心",
          //   to: "/front-dataCenter"
          // },
          // {
          //   name: "直播中心",
          //   to: "/front-videoCenter"
          // },
          // {
          //   name: "众茶之窗",
          //   to: "/front-news",
          //   type: 'code',
          //   // children: [
          //   //   { code: 'news', label: '新闻资讯' },
          //   //   { code: 'forum', label: '专家团队' },
          //   //   { code: 'exhibition', label: '茶艺师团队' }
          //   // ]
          // },
          // {
          //   name: "会员中心",
          //   to: "/front-memberCenter"
          // },
          // {
          //   name: "关于我们", type: 'link',
          //   children: [
          //     { to: "/front-about", label: '关于我们' },
          //     { to: "/front-serve", label: '服务中心' },
          //     { to: '/front-help?id=23', label: '帮助中心' }
          //   ]
          // },
          // {
          //   name: "商务合作",
          //   to: "/front-cooperation"
          // },
          // {
          //   name: "线上展会",
          //   to: "/front-exhibition"
          // }

        ],
        currentIndex: 0,
        childrenIndex: 0
      };
    },
    watch: {
      $route: {
        immediate: true,
        handler(val) {
          let findIndex = -1;
          this.navList.some((item, index) => {
            if (item.to && item.to.includes(val.path)) {
              // if (val.fullPath === item.to) {
              findIndex = index;
              return true;
            }
          });
          // console.log(findIndex);
          this.currentIndex = findIndex;
          if (this.currentIndex !== -1 && this.navList[this.currentIndex].children) {
            this.childrenIndex = 0
            if (val.query.code) {
              this.navList[this.currentIndex].children.some((item, index) => {
                if (item.code === val.query.code) {
                  this.childrenIndex = index
                  return true
                }
              })
            }
          } else {
            //没找到再找关于我们

            // 不找了

            // if (this.currentIndex === -1) {
            //   this.navList[9].children.some((item, index) => {
            //     if (item.to && item.to.includes(val.path)) {
            //       findIndex = 9;
            //       this.childrenIndex = index
            //       return true;
            //     }
            //   });
            // }
            // this.currentIndex = findIndex;
          }
        }
      }
    },
    created() {
      // this.getIndexCategoryData()
    },
    methods: {
      updateSearchContent(val) {
        this.$emit('updateSearchContent', val)
      },
      navSelect(item) {
        if (item.children && item.type === 'code') {
          this.$router.push({
            path: item.to,
            query: {
              code: item.children[0].code
            }
          });
        } else if (item.children && item.type === 'link') {
          this.$router.push(item.children[0].to);
        } else {
          this.$router.push({
            path: item.to
          });
        }
      },
      navChildrenSelect(farther, item) {
        if (farther.children && farther.type === 'code') {
          this.$router.push({
            path: farther.to,
            query: {
              code: item.code
            }
          });
        } else if (farther.children && farther.type === 'link') {
          this.$router.push(item.to);
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .header_wrapper {
    position: fixed;
		left: 0;
		width: 100%;
		z-index: 2;
  }
  .home_logo_bg {
    position: relative;
    height: 136px;;

    .logo_img_wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      
      .mid_bg {
        position: relative;
        width: 100%;
        height: 100%;
      }

      .left_logo {
        position: absolute;
        left: 0;
        height: 100%;
      }

      .right_logo {
        position: absolute;
        right: 0;
        height: 100%;
      }
    }
  }

  .content_bg {
    position: absolute; 
    top: 0;
    width: 100%;
    background: white;
  }

  .logo-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1300px;
    height: 80px;
    margin: 0 auto;
  }

  .nav_section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;

    .nav_bg {
      width: 1300px;
      height: 56px;
      display: flex;
    }
  }

  .search_bg {
    width: 50%;
    height: 100%;
  }

  .nav {
    width: 50%;
    height: 100%;

    display: flex;
    align-items: center;

    ul {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 7px;

      li {
        line-height: 34px;
        flex: 1;
        text-align: left;
        position: relative;
        font-weight: bold;
        a {
          color: rgb(51, 51, 51);
          // color: white;
          font-size: 15px;
          &.active {
            color: rgba(15, 131, 193, 1);
            // color: rgba(255, 185, 115, 1);
            &:before {
              content: '';
              width: 26px;
              height: 4px;
              background: rgba(15, 131, 193, 1);
              // background: rgba(255, 185, 115, 1);
              border-radius: 80px;
              position: absolute;
              top: 43px;
              left: 0;
              right: 100px;
              bottom: 0;
              margin: auto;
            }
          }
        }
        &:hover {
          color: rgba(14, 131, 192, 1);
        }
        .children {
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -70px;
          width: 140px;
          display: none;
          text-align: center;
          background: #fff;
          z-index: 10;
          border-radius: 2px;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

          p {
            border-bottom: 1px solid #efefef;
            line-height: 1.5;
            font-size: 14px;
            color: #333;
            cursor: pointer;
            padding: 5px 0;

            &:last-child {
              border: none;
            }

            &.on {
              color: #0f83c0;
            }

            &:hover {
              color: #0f83c0;
            }
          }
        }

        &:hover {
          .children {
            display: block;
          }
        }
      }
    }
  }
</style>
